<template>
  <section id="mysh11x5RxdsPage">
    <div class="title">选择1个数字号码竞猜全部开奖号码，投注号码与开奖号码前1相同中奖。
      <el-tooltip class="item" effect="dark" placement="top-start">
        <div slot="content">选择1个数字号码竞猜全部开奖号码，<br/>投注号码与开奖号码前1相同中奖。</div>
        <el-button type="text">范例</el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
        <el-button type="text">说明</el-button>
      </el-tooltip>
    </div>
    <textarea  class="select_one flex">

    </textarea>
    <el-row class="bottom">
      <el-col :span="6">倍数：
        <el-input-number v-model="times"  size="small" :min="1" label="描述文字"></el-input-number>
      </el-col>
      <el-col :span="18" style="text-align: right">
        当前注数：{{ count }} 注 金额：{{amount }} 元
        <el-button type="warning" @click="addNumber">↓添加选号↓</el-button>
      </el-col>

    </el-row>
    <div class="result_box flex">
      <div class="header flex">
        <div>总注数： <span class="red" style="margin-right: 20px">{{countAll}} 注</span>
          总金额： <span class="red">{{amountAll}}  元</span>
        </div>
        <div style="flex: 1;text-align: right;padding-right: 55px">
          <el-button @click='clearList' type="text">清空</el-button>
        </div>
      </div>
      <ol>
        <li v-for="(item, index) in list" class="flex">
          <div class="" style="width: 300px">[定位胆选] 号码：<span class="red">{{item.data}}</span></div>
          <div style="padding-left: 40px">倍数：<span class="red">{{item.times}}</span></div>
          <div style="padding-left: 40px">注数：<span class="red">{{item.zhushu}}</span></div>
          <div style="padding-left: 40px">金额：<span class="red">{{item.amount}}</span></div>
          <div style="flex: 1;text-align: right;padding-right: 40px">
            <el-button style="padding: 0" @click="deleteItem(index)" type="text">删除</el-button>
          </div>
        </li>
      </ol>

    </div>
    <div style="padding: 10px;">
      <el-button type="danger" @click="goCai">立即投注</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="dialogCgj">
        <h3 class="red">你确定要加入2155441期吗？</h3>
        <ul>
          <li v-for="(item, index) in list" >
            <div class="flex"><span style="white-space: nowrap;">[定位胆选] 号码：</span><span class="red single_ellipsis">{{item.data}}</span></div>
          </li>
          总金额：<span class="red">{{amountAll}} 元</span>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </section>
</template>

<script>
  import numList from './data'
  export default {
  	props: ['caipiaoTerm', 'childArr'],
    data () {
      return {
        numArr: [],
        zhushu: 0,
        list: [],
        radio3: '清',
        times: 1,
        countAll: 0,
        amountAll: 0,
        centerDialogVisible: false,
        numList: numList,
        lotteryId: 1,
        ticketId: 20,
        gameType: 20
      }
    },
    created () {
    	this.gameType = this.childArr.gameType
    	this.ticketId = this.childArr.ticketId
    	this.lotteryId = this.caipiaoTerm
    },
    computed: {
      count () {
        let index = 0
        this.numList.forEach(item => {
          index += item.numArr.length
        })
        return index
      },
      amount () {
        return this.count * this.times * 2
      }
    },
    methods: {
      addNumber () {
        if (this.count === 0) {
          this.$alert('请选择一位或多位号码', '提示', {
            confirmButtonText: '确定',
            center: true,
            callback: action => {
            }
          })
        } else {
          let times1 = this.times
          let amount1 = this.amount
          let zhushu1 = this.count
          let data = ''
          this.numList.forEach((item, index) => {
            let add = index === this.numList.length - 1 ? '' : '+'
            data = data + item.numArr.sort().join() + add
          })
          console.log(data)
          this.list.push({data: data, times: times1, amount: amount1, zhushu: zhushu1})
          this.numList.forEach((item, index) => {
            item.numArr = []
            item.numArr2 = ''
          })
        }
      },
      change (val, obj) {
        let type = typeof val
        if (type === 'string') {
          switch (val) {
            case '全':
              obj.numArr = obj.num
              break
            case '大':
              obj.numArr = ['06', '07', '08', '09', '10']
              break
            case '小':
              obj.numArr = ['01', '02', '03', '04', '05']
              break
            case '单':
              obj.numArr = ['01', '03', '05', '07', '09']
              break
            case '双':
              obj.numArr = ['02', '04', '06', '08', '10']
              break
            case '清':
              obj.numArr = []
              break
            default:
              break
          }
        } else {
        }
      },
      clearList () {
        this.$confirm('您确定要清空全部的投注列表吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list = []
        }).catch(() => {
        })
      },
      deleteItem (index) {
        this.list.splice(index, 1)
      },
      goCai () {
        if (this.list.length === 0) {
          this.$alert('您还未选择投注号码', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        } else {
          this.centerDialogVisible = true
        }
      }
    },
    watch: {
      list (val) {
        let index = 0
        let index1 = 0
        val.forEach(item => {
          index += item.amount
          index1 += item.zhushu
        })
        this.countAll = index1
        this.amountAll = index
      }
    }
  }
</script>
<style>
  .is-dark {
    background: red !important;
    color: #fff;
  }

  .el-tooltip__popper .popper__arrow, .el-tooltip__popper .popper__arrow::after {
    border-top: 8px solid red !important;
  }
</style>
<style lang="less">
  #mysh11x5RxdsPage {
    @import '../../../style/pk10';
    .select_one{
      height: 200px;
      border: 2px solid #ccc;
      width: 100%;
      line-height:20px;
      font-size: 16px;
    }
  }
</style>
